<template>
	<div class="drag-wrap drag">
		<div class="close no-drag" @click="handleCloseVideo">
			<el-icon size="20">
				<Close />
			</el-icon>
		</div>
	</div>
	<!--  视频容器-->
	<div class="video-container" @contextmenu.prevent.capture>
		<VideoPlay
			ref="videoPlayRef"
			width="100vw"
			height="100vh"
			:src="options.src"
			:controlBtns="options.controlBtns"
		/>
	</div>
</template>
<script setup lang="ts">
import VideoPlay from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'

const { ipcRenderer } = require('electron')

const { proxy } = getCurrentInstance()
const route = useRoute()
console.log(route.query)

const options = reactive({
	src: proxy.$baseUrl + route.query.url
})

// 关闭视频
const handleCloseVideo = () => {
	ipcRenderer.send('close-video')
}
</script>

<style scoped lang="scss">
.close {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 60%;
	transform: translateY(-50%);
	right: 7.5px;
	color: #fff;
	cursor: pointer;
}
.video-container {
	width: 100vw;
	height: 100vh;
}
</style>
